<template>
	<div v-cloak>

		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="废气" name="first"></el-tab-pane>
			<el-tab-pane label="废水" name="second"></el-tab-pane>
		</el-tabs>

		<div class="font16 color333 mb10">基本信息</div>
		<div class="pad20 bgfff">
			<table style="width: 100%;">
				<tr v-for="(item,index) in dataList.rawMaterial" :key="index">
					<td v-if="index == 0" :rowspan="dataList.rawMaterial.length">主要原料用量</td>
					<td>{{item.equipmentName}}</td>
					<td>
						<div class="mb10 displayFlex" v-for="(item2,index2) in item.list">
							<div class="mr20" style="width:160px">{{item2.materialName}}</div>
							<div>{{item2.qty}}{{item2.unitValue}}</div>
						</div>
					</td>
					<td>
						<div class="mb10 displayFlex">
							<div class="mr20" style="width:120px">数据支撑完整度</div>
							<div class="ml10 color-primary">{{item.percent}}%</div>
						</div>
						<div class="displayFlex point">
							<div class="mr20" style="width:120px">原始数据源</div>
							<div class="ml10 color-primary" @click="$router.push('/produceManage/order')">查阅</div>
						</div>
					</td>
				</tr>


				<tr v-for="(item,index) in dataList.auxiliaryMaterial" :key="index">
					<td v-if="index == 0" :rowspan="dataList.auxiliaryMaterial.length">主要辅料用量</td>
					<td>{{item.equipmentName}}</td>
					<td>
						<div class="mb10 displayFlex" v-for="(item2,index2) in item.list">
							<div class="mr20" style="width:160px">{{item2.materialName}}</div>
							<div>{{item2.qty}}{{item2.unitValue}}</div>
						</div>
					</td>
					<td>
						<div class="mb10 displayFlex">
							<div class="mr20" style="width:120px">数据支撑完整度</div>
							<div class="ml10 color-primary">{{item.percent}}%</div>
						</div>
						<div class="displayFlex point">
							<div class="mr20" style="width:120px">原始数据源</div>
							<div class="ml10 color-primary" @click="$router.push('/produceManage/order')">查阅</div>
						</div>
					</td>
				</tr>

				<tr v-for="(item,index) in dataList.energy" :key="index">
					<td v-if="index == 0" :rowspan="dataList.energy.length">能源消耗</td>
					<td>{{item.equipmentName}}</td>
					<td>
						<div class="mb10 displayFlex" v-for="(item2,index2) in item.list">
							<div class="mr20" style="width:160px">{{item2.energyName}}</div>
							<div>{{item2.qty}}{{item2.unitValue}}</div>
						</div>
					</td>
					<td>
						<div class="mb10 displayFlex">
							<div class="mr20" style="width:120px">数据支撑完整度</div>
							<div class="ml10 color-primary">{{item.percent}}%</div>
						</div>
						<div class="displayFlex point">
							<div class="mr20" style="width:120px">原始数据源</div>
							<div class="ml10 color-primary" @click="$router.push('/produceManage/order')">查阅</div>
						</div>
					</td>
				</tr>

				<tr v-for="(item,index) in dataList.runtime" :key="index">
					<td v-if="index == 0" :rowspan="dataList.runtime.length">运行时间和生产负荷</td>
					<td>{{item.equipmentName}}</td>
					<td>
						<div class="mb10 displayFlex">
							<div class="mr20" style="width:160px">正常运行时间</div>
							<div>{{item.normalHour}}h</div>
						</div>
						<div class="mb10 displayFlex">
							<div class="mr20" style="width:160px">非正常运行时间</div>
							<div>{{item.abnormalHour}}h</div>
						</div>
						<div class="mb10 displayFlex">
							<div class="mr20" style="width:160px">停产时间</div>
							<div>{{item.notProduceHour}}h</div>
						</div>
						<div class="mb10 displayFlex">
							<div class="mr20" style="width:160px">生产负荷</div>
							<div>{{item.produceLoad}}%</div>
						</div>
					</td>
					<td>
						<div class="mb10 displayFlex">
							<div class="mr20" style="width:120px">数据支撑完整度</div>
							<div class="ml10 color-primary">{{item.percent}}%</div>
						</div>
						<div class="displayFlex point">
							<div class="mr20" style="width:120px">原始数据源</div>
							<div class="ml10 color-primary" @click="$router.push('/produceManage/order')">查阅</div>
						</div>
					</td>
				</tr>

				<tr v-for="(item,index) in dataList.product" :key="index">
					<td v-if="index == 0" :rowspan="dataList.product.length">主要产品</td>
					<td>{{item.equipmentName}}</td>
					<td>
						<div class="mb10 displayFlex" v-for="(item2,index2) in item.list">
							<div class="mr20" style="width:160px">{{item2.productName}}</div>
							<div>{{item2.qty}}{{item2.unitValue}}</div>
						</div>
					</td>
					<td>
						<div class="mb10 displayFlex">
							<div class="mr20" style="width:120px">数据支撑完整度</div>
							<div class="ml10 color-primary">{{item.percent}}%</div>
						</div>
						<div class="displayFlex point">
							<div class="mr20" style="width:120px">原始数据源</div>
							<div class="ml10 color-primary" @click="$router.push('/produceManage/order')">查阅</div>
						</div>
					</td>
				</tr>


				<tr v-for="(item,index) in dataList1.data6.data" :key="index">
					<td v-if="index == 0" :rowspan="dataList1.data6.data.length">取排水</td>
					<td>{{item.title}}</td>
					<td>
						<div class="mb10 displayFlex" v-for="(item2,index2) in item.data">
							<div class="mr20" style="width:160px">{{item2.title}}</div>
							<div>{{item2.data}}</div>
						</div>
					</td>
					<td>
						<div class="mb10 displayFlex">
							<div class="mr20" style="width:120px">数据支撑完整度</div>
							<div class="ml10 color-primary">{{Math.floor(Math.random() * 100) + 1}}%</div>
						</div>
						<div class="displayFlex point">
							<div class="mr20" style="width:120px">原始数据源</div>
							<div class="ml10 color-primary" @click="$router.push('/produceManage/order')">查阅</div>
						</div>
					</td>
				</tr>

				<tr>
					<td :rowspan="6">污染治理设施计划投资计划</td>
					<td :rowspan="6">全厂</td>
					<td :colspan="2">
						<div class="mb10">
							<span class="mr20">治理设施编号</span>
							<span></span>
						</div>

						<div class="mb10">
							<span class="mr20">治理设施类型</span>
							<span></span>
						</div>


						<div class="mb10">
							<span class="mr20">开工时间</span>
							<span></span>
						</div>


						<div class="mb10">
							<span class="mr20">建设投厂时间</span>
							<span></span>
						</div>

						<div class="mb10">
							<span class="mr20">计划总投资</span>
							<span></span>
						</div>
						<div class="mb10">
							<span class="mr20">报告周期内累计投资</span>
							<span></span>
						</div>
					</td>
				</tr>
			</table>
		</div>

		<div class="font16 color333 mb10 mt10">燃料分析表</div>
		<div class="pad20 bgfff">
			<table style="width: 100%;">
				<tr>
					<td>主要生产单元名称</td>
					<td>生产设施编号</td>
					<td>生产设施名称</td>
					<td>燃料种类</td>
					<td>实物使用量(万t、万m)</td>
					<td>收到基灰分Aar(%)</td>
					<td>收到基全硫 St.ar(%)</td>
					<td>收到基碳 Car(%)</td>
					<td>干燥无灰基Vdaf挥发分(%)</td>
					<td>硫化氢(%)</td>
				</tr>

				<tr>
					<td>热力生产单元</td>
					<td>/</td>
					<td>/</td>
					<td>生物质燃料</td>
					<td>12万t</td>
					<td>40</td>
					<td>30</td>
					<td>12</td>
					<td>22</td>
					<td>33</td>
				</tr>
			</table>
		</div>

		<div class="font16 color333 mb10 mt10">实际排放情况及达标判定分析</div>
		<div class="font16 color333 mb10 mt10">实际排放信息</div>
		<div class="pad20 bgfff" style="width: 100%;overflow-x: auto;">
			<table style="width: 100%;">
				<tr>
					<td style="width:100px">排放口类型</td>
					<td style="width:120px">排放编号及名称</td>
					<td style="width:150px">污染物</td>
					<td style="width:120px">许可排放量(吨)</td>
					<td style="width:120px">季度合计</td>
					<td v-for="(item,index) in timeList" style="width:120px">{{item}}</td>
					<td>备注</td>
				</tr>

				<el-empty v-if="dataList2.length == 0" style="margin: 0 0 0 500px;width: 100%;" />
				<template v-for="(item,index) in dataList2">
					<tr v-for="(item2,index2) in item.list">
						<td v-if="index2 == 0" :colspan="2" :rowspan="item.list.length">{{item.outletName}}</td>
						<td>{{item2.pollutionName}}</td>
						<td>/</td>
						<td>{{item2.qty}}{{item2.unitValue}}</td>

						<td v-for="(item3,index3) in timeList">
							{{item.list[index2].itemList[index3].qty}}
						</td>
						<td></td>
					</tr>
				</template>

			</table>
		</div>

		<div class="font16 color333 mb10 mt10">超标排放量</div>
		<div class="pad20 bgfff">
			<table style="width: 100%;">
				<tr>
					<td>超标时间段(开始时间-结束时间)</td>
					<td>生产设施编号</td>
					<td>排口编号</td>
					<td>超标污染物种类</td>
					<td>实际排放浓度(折标，mg/m³)</td>
					<td>超标原因说明</td>
				</tr>

				<el-empty v-if="dataList3.length == 0" style="margin: 0 0 0 400px;width: 100%;" />
				<tr v-for="(item,index) in dataList3" :key="index">
					<td style="width: 320px;">{{item.startTime}}~{{item.endTime}}</td>
					<td style="width: 120px;">/</td>
					<td style="width: 120px;">{{item.outletNo}}</td>
					<td style="width: 120px;">{{item.pollutionName}}</td>
					<td style="width: 320px;">{{item.monitorValue}}</td>
					<td>{{item.reason}}</td>
				</tr>
			</table>
		</div>

		<div class="font16 color333 mb10 mt10">污染治理设施异常情况汇总表</div>
		<div class="pad20 bgfff">
			<table style="width: 100%;">
				<tr>
					<td :rowspan="2">故障类型</td>
					<td :rowspan="2">超标时间段(开始时间-结束时间)</td>
					<td :rowspan="2">故障设施</td>
					<td :rowspan="2">故障原因</td>
					<td :colspan="2">
						各排放因子浓度(mg/m*或者dB(A))
					</td>
					<td :rowspan="2">应对措施</td>
				</tr>

				<tr>
					<td>污染因子</td>
					<td>排放范围</td>
				</tr>

				<el-empty v-if="dataList4.length == 0" style="margin: 0 0 0 420px;width: 100%;" />
				<template v-for="(item,index) in dataList4">
					<tr>
						<td :rowspan="item.pollutionList.length+1">/</td>
						<td :rowspan="item.pollutionList.length+1">{{item.startTime}}~{{item.endTime}}</td>
						<td :rowspan="item.pollutionList.length+1">{{item.defenceName}}</td>
						<td :rowspan="item.pollutionList.length+1">{{item.reason}}</td>
						<td :colspan="2" :rowspan="1"></td>
						<td :rowspan="item.pollutionList.length+1">{{item.solvedContent}}</td>
					</tr>

					<tr v-for="(item2,index2) in item.pollutionList" v-if="item2.pollutionName">
						<td>
							{{item2.pollutionName}}
						</td>
						<td>
							{{item2.amountStr}}{{item2.unitValue}}
						</td>
					</tr>
				</template>
			</table>
		</div>

		<div class="font16 color333 mb10 mt10">自行储存/利用/处置设施情况</div>
		<div class="pad20 bgfff">
			<table style="width: 100%;">
				<tr>
					<td style="width: 150px;">自行储存/利用/处置设施编号</td>
					<td style="width: 150px;">减少工业园体废物产生、促进综合利用的具体措施</td>
					<td style="width: 200px;">是否超能力储存/利用/处置</td>
					<td style="width: 200px;">是否超种类储存/利用/处置</td>
					<td style="width: 150px;">是否超期储存</td>
					<td style="width: 200px;">是否存在不符合排污许可证规定污染防控
						技术要求的情况</td>
					<td style="width: 300px;">如存在一项以上选择“是”的，请说明具体
						是否存在不符合</td>
				</tr>

				<el-empty v-if="dataList5.length == 0" style="margin: 0 0 0 500px;width: 100%;" />
				<tr v-for="(item,index) in dataList5">
					<td>{{item.storageName}}({{item.storageNum}})</td>
					<td>/</td>
					<td>{{item.excessInventory?'是':'否'}}</td>
					<td>{{item.excessCategory?'是':'否'}}</td>
					<td>{{item.excessOneYear?'是':'否'}}</td>
					<td>{{item.existProblem?'是':'否'}}</td>
					<td>否</td>
				</tr>

			</table>
		</div>

		<div class="font16 color333 mb10 mt10">附件</div>
		<div class="pad20 bgfff">
			<table style="width: 100%;">
				<tr>
					<td>附件类型</td>
					<td>文件名称</td>
					<td>附件揣述</td>
					<td>上传时间</td>
					<td>操作</td>
				</tr>
				<tr>
					<td>监测点位</td>
					<td style="width: 200px;"></td>
					<td style="width: 200px;"></td>
					<td style="width: 200px;"></td>
					<td style="width: 200px;">
						<div class="point color-primary" @click="exportExcle('1')">下载</div>
					</td>
				</tr>
				<tr>
					<td>废气自行监测结果表</td>
					<td style="width: 200px;"></td>
					<td style="width: 200px;"></td>
					<td style="width: 200px;"></td>
					<td style="width: 200px;">
						<div class="point color-primary" @click="exportExcle('2')">下载</div>
					</td>
				</tr>
				<tr>
					<td>废水自行监测结果表</td>
					<td style="width: 200px;"></td>
					<td style="width: 200px;"></td>
					<td style="width: 200px;"></td>
					<td style="width: 200px;">
						<div class="point color-primary" @click="exportExcle('3')">下载</div>
					</td>
				</tr>
			</table>
		</div>

		<div class="font16 color333 mb10 mt10">小结</div>
		<div class="pad20 bgfff">
			<el-input type="textarea" placeholder="小结" v-model="remark" :rows="8" readonly></el-input>
		</div>

	</div>
</template>

<script>
	let that
	export default {
		data() {
			return {
				activeName: 'first',
				params: {
					year: 2024,
					month: 11,
					ticketId: '',
					startTime: '2024-10-01',
					endTime: '2024-12-31',
					dateType: 'QUARTER'
				},
				dataList: {},
				dataList2: [],
				dataList3: [],
				dataList4: [],
				dataList5: [],
				dataList6: [],
				timeList: [],
				remark: '',
				dataList1: {
					data1: {
						title: "主要原料用量",
						data: []
					},
					data2: {
						title: "主要辅料用量",
						data: []
					},
					data3: {
						title: "能源消耗",
						data: []
					},
					data4: {
						title: "运行时间和生产负荷",
						data: []
					},
					data5: {
						title: "主要产品",
						data: []
					},
					data6: {
						title: "取排水",
						data: []
					}
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.params.dateType = that.$route.query.dataType
			that.params.startTime = that.$route.query.startTime
			that.params.endTime = that.$route.query.endTime

			that.getEquipmentList()
			that.getGasPollutionList()
			that.getGasWarningList()
			that.getGasProblemList()
			that.getStorageList()
			that.downloadGasSurvey()
			that.getRemark()
		},

		methods: {
			handleClick(tab, event) {
				if (tab.index == '0') {
					that.getGasWarningList()
					that.getGasProblemList()
				} else {
					that.getWaterWarningList()
					that.getWaterProblemList()
				}
			},

			getRemark() {
				that.ajax({
					url: 'executeReport/remark/getRemark',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: (res) => {
						if (res.data) {
							that.remark = res.data
						}
					},
				})
			},

			downloadGasSurvey() {
				that.ajax({
					url: 'executeReport/file/downloadGasSurvey ',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: (res) => {
						if (res.data) {
							that.dataList6 = res.data
						}
					},
				})
			},

			getStorageList() {
				that.ajax({
					url: 'executeReport/storage/getStorageList',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: (res) => {
						if (res.data) {
							that.dataList5 = res.data
						}
					},
				})
			},

			getWaterProblemList() {
				that.ajax({
					url: 'executeReport/problem/getWaterProblemList',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: (res) => {
						if (res.data) {
							that.dataList4 = res.data
						}
					},
				})
			},

			getGasProblemList() {
				that.ajax({
					url: 'executeReport/problem/getGasProblemList',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: (res) => {
						if (res.data) {
							that.dataList4 = res.data
						}
					},
				})
			},

			getWaterWarningList() {
				that.ajax({
					url: 'executeReport/warning/getWaterWarningList',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: (res) => {
						if (res.data) {
							that.dataList3 = res.data
						}
					},
				})
			},

			getGasWarningList() {
				that.ajax({
					url: 'executeReport/warning/getGasWarningList',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: (res) => {
						if (res.data) {
							that.dataList3 = res.data
						}
					},
				})
			},

			getGasPollutionList() {
				that.ajax({
					url: 'executeReport/pollution/getGasPollutionList',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: (res) => {
						if (res.data) {
							for (let item of res.data) {
								for (let item1 of item.list) {
									for (let item2 of item1.itemList) {
										console.log(item2)
										let thisIndex = that.timeList.findIndex(item3 => item3 == item2
											.dateStr)
										if (thisIndex == -1) that.timeList.push(item2.dateStr)
									}
								}
							}
							that.dataList2 = res.data
						}
					},
				})
			},

			getEquipmentList() {
				that.ajax({
					url: 'executeReport/equipment/getEquipmentList',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: (res) => {
						if (res.data) {
							that.dataList = res.data
						}
					},
				})
			},

			//导出危废台账
			exportExcle(type) {
				let loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				let temp = that.params.year + "-" + that.params.month + "-01";

				//let appPath = "http://192.168.0.110:8081/"
				let appPath = "https://www.weifeibangbang.com/"
				let url
				if (type == '1') url = 'executeReport/file/downloadOutlet'
				if (type == '2') url = 'executeReport/file/downloadGasSurvey'
				if (type == '3') url = 'executeReport/file/downloadWaterSurvey'
				
				let thisParams = {
					startTime:that.params.startTime,
					endTime:that.params.endTime,
				}
				window.open(appPath + url + '?str=' + encodeURI(JSON.stringify(thisParams))+'&ticketId=' + that.params.ticketId)
				loading.close();
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	table {
		border-collapse: collapse;
		border: 1px solid #ebeef5;
		/* 设置表格的边框为单线，颜色为黑色 */
	}

	th,
	td {
		border: 1px solid #ebeef5;
		padding: 12px 10px;
		/* 设置单元格的边框为单线，颜色为黑色 */
	}
</style>